<template name="deviceheader">
	<view class="deviceheader">
		<view class="top_bg">
			<view class="top_bgimg" @click="previewImg()">
				<image :src="headerdata.img"></image>
			</view>
			<view class="top_bgtext">
				<view class="top_bgtitle">{{headerdata.shop_name}}</view>
				<view>商户UID:{{headerdata.uid}}</view>
				<view>门店ID:{{headerdata.shop_id}}</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: "deviceheader",
		data() {
			return {
				headerdata:{
					img:'',
					shop_name:'',
					uid:'',
					shop_id:''
				}
			};
		},
		props: {
			devicedata:''
		},
		mounted:function(){
		},
		methods:{
			previewImg:function(){
				uni.previewImage({
					urls:[this.headerdata.img]
				})
			}
		},
		watch:{
			devicedata:function(){
				this.headerdata.img = this.devicedata.img;
				this.headerdata.shop_name = this.devicedata.shop_name;
				this.headerdata.uid = this.devicedata.uid;
				this.headerdata.shop_id = this.devicedata.shop_id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deviceheader{
		background-color: #007AFF;
		text-align: center;
		margin-bottom: 150rpx;
		position: relative;
		height: 250rpx;
		font-size: $uni-font-size-base;
		.top_bg{
			display: flex;
			position: absolute;
			left: 0;right: 0;top: 20rpx;
			width: 100%;
			width: 690rpx;
			height: 335rpx;
			margin: 0 auto;
			background-image: url("../../static/img/ic_qrcodebg2.png");
			background-size: 100% 100%;
			.top_bgimg{
				width: 45%;
				image{
					width: 230rpx;
					height: 230rpx;
					margin-top: 50rpx;
				}
			}
			.top_bgtext{
				margin-left: 20rpx;
				margin-top: 50rpx;
				view{
					padding: 10rpx;
					text-align: left;
					&.top_bgtitle{
						color: #333333;
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
